<template>
  <demo-section class="demo-section">
    <demo-block title="基础用法">
      <a9-progress :percentage="percent" class="a9-progress" />
      <!--<a9-progress :percentage="percent / 2" stroke-width="10" :pivot-text="percent / 2 + '%'" class="a9-progress"/>-->
    </demo-block>

    <demo-block title="环形样式">
      <a9-progress
        type="circle"
        v-model="circlePercent"
        :stroke-width="30"
        :rate="80"
        speed="20"
        color="#ff1234"
      />
      <a9-progress
        v-model="circlePercent1"
        :rate="50"
        size="120px"
        speed="20"
        text="大小定制"
        type="circle"
      />
    </demo-block>
  </demo-section>
</template>

<script>
export default {
  data: () => ({
    percent: 60,
    circlePercent: 20,
    circlePercent1: 40
  })
}
</script>

<style lang="less">
.demo-section {
  padding: 20px;
}

::v-deep .a9-progress {
  margin: 40px auto;
}
</style>
